<template>
  <div style="
    padding: 20px 0px;
    width: 1140px;
    margin:0 auto;
  ">
    <TestBlock />
  </div>
</template>

<script>
  import TestBlock from '../../components/test-block/index'
  export default {
    components:{
      TestBlock
    },
    
    data() {
      return {
        
      }
    },
    methods: {
      
    }
  }
</script>

<style lang="scss">
.block_list{
  display: flex;
  flex-direction: row;
  margin-left: -10px;
  margin-right: -10px;
  flex-wrap: wrap;
  .scaffoldCard{
    flex: 0 0 calc(50% - 20px);
    width: calc(50% - 20px);
    max-width: calc(50% - 20px)
  }
  .card {
    padding-left: 10px;
    padding-right: 10px;
    .content{
      position: relative;
      display: block;
      transition: transform .3s ease;
      box-shadow: 0 8px 24px rgba(163,177,191,.35);
      background: #fafafa;
      
      overflow: hidden;
      
      margin-bottom: 40px;
      &:hover{
        transform: translateY(-6px);
        .item-action{
          transform: translateY(0);
        }
        .item-info{
          transform: translateY(-20px)
        }
      }
      .item{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200px;
        transition: all .3s ease;
        background-color: #fff;
        
        .screenshot{
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          height: 200px;
          transition: all .3s ease;
          background-color: #fff;
          img{
            max-width: 100%;
            height: 200px;
          }
        }
        
      }
      .item-info{
        background: 0 0;
        text-align: center;
        padding: 20px 40px;
        transition: transform .3s ease;
        transform: translateY(0);
        position: relative;
        z-index: 9;
        .item-title{
          margin-top: 14px;
          font-size: 14px;
          font-weight: 700;
          color: #333;
        }
        .item-desc{
          color: #999;
          margin-top: 10px;
          font-size: 12px;
          line-height: 22px;
          height: 44px;
          font-weight: 400;
        }
      }
      .item-action{
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 0 0 4px 4px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        transition: transform .3s ease;
        transform: translateY(100%);
        z-index: 10;
        .item-button{
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 42px;
          line-height: 42px;
          font-size: 12px;
          font-weight: 700;
          background: #2077ff;
          color: hsla(0,0%,100%,.8);
          img{
            width: 20px;
            margin-right: 6px
          }
        }
      }
    }
  }
  
}
</style>